import { QuestionCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Popover } from 'antd';
import React from 'react';
import Styles from './StandText.less';

const StandContent = () => {
  const intl = useIntl();
  return (
    <div className={Styles.StandText}>
      <div className={Styles.StandTextTitle}>
        {intl.formatMessage({ id: 'batteryVoltage.capcityText' })}
      </div>
      <ul>
        <li>{intl.formatMessage({ id: 'batteryVoltage.capcityS1' })}</li>
        <li>{intl.formatMessage({ id: 'batteryVoltage.capcityS2' })}</li>
        <li>{intl.formatMessage({ id: 'batteryVoltage.capcityS3' })}</li>
        <li>{intl.formatMessage({ id: 'batteryVoltage.capcityS4' })}</li>
      </ul>
      <div>{intl.formatMessage({ id: 'batteryVoltage.ScoupeTitle' })}</div>
      <table className={Styles.StandTable}>
        <tbody>
          <tr>
            <td>{intl.formatMessage({ id: 'batteryVoltage.Scoupe1' })}</td>
            <td>{'90% <SOH ≤100%'}</td>
          </tr>
          <tr>
            <td>{intl.formatMessage({ id: 'batteryVoltage.Scoupe2' })}</td>
            <td>{'80% <SOH ≤90%'}</td>
          </tr>
          <tr>
            <td>{intl.formatMessage({ id: 'batteryVoltage.Scoupe3' })}</td>
            <td>{'70% <SOH ≤80%'}</td>
          </tr>
          <tr>
            <td>{intl.formatMessage({ id: 'batteryVoltage.Scoupe4' })}</td>
            <td>{'60% <SOH ≤70%'}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};
const StandText: React.FC = () => {
  const intl = useIntl();

  return (
    <>
      <div>
        <Popover title={false} content={StandContent} placement="bottomRight">
          <a href="#">
            <QuestionCircleOutlined />
            &nbsp;{intl.formatMessage({ id: 'batteryVoltage.vol.standard' })}
          </a>
        </Popover>
      </div>
    </>
  );
};

export default StandText;
